<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="1200px">
			<el-form v-show="state.showSearch" :model="state.queryParams" ref="queryFormRef" inline>
				<el-form-item label="父订单号" prop="order_no">
					<el-input v-model="state.queryParams.order_no" placeholder="请输入父订单号" />
				</el-form-item>
				<el-form-item label="商品名称" prop="goods_title">
					<el-input v-model="state.queryParams.goods_title" clearable placeholder="请输入商品名称" />
				</el-form-item>
				<el-form-item label="结算时间" prop="time">
					<el-date-picker
						v-model="state.queryParams.time"
						type="datetimerange"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						format="YYYY-MM-DD HH:mm:ss"
						value-format="X"
						:default-time="state.defaultTime"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onQuery">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
					<el-button @click="onResetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重 置
					</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="订单号" align="center" prop="order" width="244">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								父订单号：{{ row.order_no }}<br />
								子订单号：{{ row.order_detail_no }}
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="商品名称" align="center" prop="goods_title" />
				<el-table-column label="商品信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								商品规格：{{ row.option_name }}<br />
								购买数量：{{ row.total_num }}
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="收货信息" align="center" prop="address_info" width="166">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								收货人：{{ row.address_name }}<br />
								手机号：{{ row.address_mobile }}<br />
								所在地区：{{ row.country }}，{{ row.province }}，{{ row.city }}，{{ row.county }}<br />
								详细地址：<el-popover placement="top" title="详细地址" :width="200" trigger="hover" :content="row.address_detail">
									<template #reference>
										<el-button type="primary" link>查看</el-button>
									</template>
								</el-popover>
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="快递信息" align="center" prop="order_info" width="218">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div v-if="row.logistics_name" style="text-align: left">
								快递公司：{{ row.logistics_name }}<br />
								快递单号：{{ row.logistics_no }}<br />
							</div>
							<div v-else>----</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="订单信息" align="center" prop="order_info" width="200">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								运费：{{ Number(row.trans_amt) ? row.trans_amt : '包邮' }}<br />
								总供货价：{{ row.supplier_amt }}<br />
								<span v-if="Number(row.after_supplier_amt)">售后退款金额：<el-button @click="onOrderAfterRecords(row)" type="primary" link>{{ row.after_supplier_amt }}</el-button></span>
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="时间" align="center" prop="state" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								下单时间：{{ formatterPayTime(row) }}<br />
								发货时间：{{ formatterDeliveryTime(row) }}<br />
								结算时间：{{ formatterCompleteTime(row) }}
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center" prop="state" fixed="right" width="180">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								<!-- 订单状态：{{ formatterState(row) }}<br /> -->
								售后状态：{{ formatterAfterSaleStatus(row) }}<br />
								结算状态：{{ formatterStatus(row) }}<br />
								提现状态：{{ formatterWithdrawStatus(row) }}
							</div>
						</el-row>
					</template>
				</el-table-column>
			</el-table>
			<template #footer>
				<PaginationComponent
					v-if="state.total"
					:total="state.total"
					v-model:page="state.queryParams.pageNum"
					v-model:limit="state.queryParams.pageSize"
					@pagination="getList"
				/>
			</template>
		</el-dialog>
		<OrderAfterRecordsDialog ref="orderAfterRecordsDialogRef" />
	</div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, inject, reactive, ref } from 'vue';
import { supplierWithdrawalApi } from '/@/api/supplier';
import { timeDictionary } from '/@/utils/dictionary';

const OrderAfterRecordsDialog = defineAsyncComponent(() => import('../../dialog/orderAfterRecordsDialog.vue'));

const Dayjs: any = inject('dayjs');
const SupplierWithdrawalApi = supplierWithdrawalApi();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	showSearch: true,
	queryParams: {
		goods_title: '',
		order_no: '',
		time: [],
		withdraw_id: '',
		type: 1,
		pageNum: 1,
		pageSize: 10,
	},
	tableList: [],
	loading: false,
	total: 0,
	defaultTime: [
		new Date(Dayjs().year(), Dayjs().month(), Dayjs().date(), 0, 0, 0),
		new Date(Dayjs().year(), Dayjs().month(), Dayjs().date(), 23, 59, 59),
	],
});
const queryFormRef = ref();
const orderAfterRecordsDialogRef = ref();

/********** 触发事件 **********/
// 查询
const onQuery = () => {
	state.queryParams.pageNum = 1;
	getList();
};
// 重置查询
const onResetQuery = () => {
	queryFormRef.value.resetFields();
	onQuery();
};
// 查看售后记录
const onOrderAfterRecords = (row: any) => {
	orderAfterRecordsDialogRef.value.openDialog(row);
};

/********** 方法事件 **********/
// 打开
const openDialog = (row: any) => {
	state.dialog.isShowDialog = true;
	state.dialog.title = `【${row.withdrawal_no}】货款订单`;
	state.queryParams = {
		goods_title: '',
		order_no: '',
		time: [],
		withdraw_id: row.id,
		type: row.type,
		pageNum: 1,
		pageSize: 10,
	};
	getList();
};
// 刷新列表
const getList = () => {
	state.loading = true;
	state.queryParams.type === 4 ? _supplierBillDetailsRefuse(state.queryParams) : _supplierBillDetails(state.queryParams);
};

// 结算状态字典
const formatterStatus = (row: any) => {
	switch (row.status) {
		case 1:
			return '待结算';
		case 2:
			return '已结算';
		default:
			return '未知状态';
	}
};
// 支付时间字典
const formatterPayTime = (row: any) => {
	return timeDictionary(row.pay_time);
};
// 发货时间字典
const formatterDeliveryTime = (row: any) => {
	return timeDictionary(row.delivery_time);
};
// 结算时间字典
const formatterCompleteTime = (row: any) => {
	return timeDictionary(row.complete_time);
};
// 售后状态字典
const formatterAfterSaleStatus = (row: any) => {
	switch (row.after_type) {
		case 1:
			switch (row.state) {
				case 0:
					return '退款待处理';
				case 1:
					return '退款处理中';
				case 2:
					return '退款处理完成';
				default:
					return '未知状态';
			}
		case 2:
			switch (row.state) {
				case 0:
					return '退货退款待处理';
				case 1:
					return '退货退款处理中';
				case 2:
					return '退货退款处理完成';
				default:
					return '未知状态';
			}
		default:
			return '未知状态';
	}
};
// 提现状态字典
const formatterWithdrawStatus = (row: any) => {
	switch (row.withdraw_status) {
		case 1:
			return '待提现';
		case 2:
			return '已提现';
		default:
			return '未知状态';
	}
};

/********** 网络请求 **********/
// 账单详情（待审核/待打款/已打款）
const _supplierBillDetails = (params: Object) => {
	SupplierWithdrawalApi.supplierBillDetails(params)
		.then((res) => {
			state.tableList = res.data.list;
			state.total = res.data.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};
// 账单详情（已拒绝）
const _supplierBillDetailsRefuse = (params: Object) => {
	SupplierWithdrawalApi.supplierBillDetailsRefuse(params)
		.then((res) => {
			state.tableList = res.data.list;
			state.total = res.data.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
